<div nz-row class="mb30">
  <button nz-button nzType="primary" nzSize="large" nzShape="circle" (click)="backward()">
    <i nz-icon nzType="arrow-left" nzTheme="outline"></i>
  </button>
</div>

<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>数据库URL</nz-form-label>
    <nz-form-control [nzSpan]="12" [nzErrorTip]="descriptionErrorTpl">
      <input nz-input formControlName="description" placeholder="请输入描述"/>
      <ng-template #descriptionErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          请输入描述!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>数据库URL</nz-form-label>
    <nz-form-control [nzSpan]="12" [nzErrorTip]="urlErrorTpl">
      <input nz-input formControlName="url" placeholder="请输入数据库URL"/>
      <ng-template #urlErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          请输入数据库URL!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>数据库驱动</nz-form-label>
    <nz-form-control [nzSpan]="12" [nzErrorTip]="driverErrorTpl">
      <input nz-input formControlName="driver" placeholder="请输入数据库驱动"/>
      <ng-template #driverErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          请输入数据库驱动!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>数据库用户名</nz-form-label>
    <nz-form-control [nzSpan]="12" [nzErrorTip]="usernameErrorTpl">
      <input nz-input formControlName="username" placeholder="请输入数据库用户名"/>
      <ng-template #usernameErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          请输入数据库用户名!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>数据库密码</nz-form-label>
    <nz-form-control [nzSpan]="12" [nzErrorTip]="passwordErrorTpl">
      <nz-input-group [nzSuffix]="suffixTemplate">
        <input
          [type]="passwordVisible ? 'text' : 'password'"
          nz-input
          placeholder="请输入数据库密码"
          formControlName="password"
        />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i class="cursor-pointer" nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
           (click)="passwordVisible = !passwordVisible"></i>
      </ng-template>
      <ng-template #passwordErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          请输入数据库密码!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzOffset]="7" [nzSpan]="12">
      <button nz-button nzType="primary" [disabled]="!validateForm.valid">提交</button>
      <button nz-button (click)="resetForm($event)">重置</button>
    </nz-form-control>
  </nz-form-item>
</form>
